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heitml Component Editor - Microsoft Intern... QIBIMl 




Welcome to the Component Editor 

With the component editor yon can edit pages shown in other browser windows. It is 
especia]ly intended to edit server side components. For hyouX editing see WYSIWYG 
editing. 



-components displajred in other windows show up with cobred handles. Please click 
on a handle to edit a component, or select a fimction from the menu bar on top of this 
window. Use New Page from File to call the new page wizard, or use Insert to 
browse available components. 



To get more information please click on help here or in the menu bar. The best way to 
learn about the component editor is to bok at the tutorial . 



Fig. 3: Component Editor Window after Startup 
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Fieldtext 

Text field. 

Property Value 

Name |Guest_Narri^ 

Size [bo" 

Maxlertgth 

Value 



Maidatoiy 
Trim |7 

r 



Descr 



Desci^tion 

Fieldname. 

Field size in characters. 

Limit to the length of the field's value. 

Initial field value. 

Check to require the user to fill out the 
field. 

Check to trim leading and trailing white- 
space flnm value. 

A description of the field value. 



Disabled C Yes <^ No <^ Like form Is field disabled? 

Password f" Check to render input Tmreadalble. 

tsmvy^ei l BSHlilgll MsaiiiOge^lMI ^jH^ililS 



Fig 4: Component Editor Window displaying a Component Edit Page 



<Hl>Database Search & Edit Form</Hl> 

<P>This is the fill-in form used to create new entries, to search, modify, or delete records 
<dbform id=se.dbfonnl relation="guestbook" key="Guest_Name" method="post" > 
<table bgcolor="#90bb90" cellspacing=0 cellpadding=5 border=0 > 
<tr><td> Name</td> 

<td><dbrield name="Guest_Name" size=50 mandatory=false trim=true></td></tr> 
<tr> <td> E-Mail</td> 

<td><dbfield name="Emair' size=50 mandatory=false trim=true></td></tr> 
<tr><td>Address</td><dbrield name="Address" size=60 mandatory=false trim=true></td></tr> 
<tr><td>Country</td><td><dbfield name="Country" size=60 mandatory=false trim=true></td></tr> 
<tr><td>Comment</td><td> <dbrield name="Comment" rows=5 cols=60></td></tr> 
</TABLE> 

<dbformbutton name="fmd" type="find" ><ydbformbutton> 
<dbformbutton name="modify" type="modify"><dbformbutton> 
<dbformbutton name="delete" type="delete"></dbformbutton> 
<dbformbutton name="clear" type="clear" ><dbformbutton> 
</dbform> 



Fig.5: Page Source of Sample Page 



Browser Software 
Displays Internet Page 
(13) 



Client Computer (11) 



Sends Request 



Sends Page 



Passes 
on 

Request 



Web Server Software 

receives Request, 
calls the appropriate page 
generating program (14) 



Server Computer (12) 
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Page Generation Program 
or Module (15) 
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G inerated 
P Lge 



Fig. 6: State of the Art Model for Server Based Intemet Applications 



Browser Software 
Displays Internet Page 
(23) 



Client Computer (21) 



Sends Request ^ 



Sends Page 



Passes on 
Request 



Reads 



Web Server Software 

receives Request, 
calls the appropriate page 
generating program 
(24) 



ISSC Processor Program or Server 
Module (25) 



Component 
Page (26) 




Component 
Class n (27) 



Component 
Class 1 (27) 



Server Computer (22) 



Returns 
Generat 
Page 



Call ea 
other 



Fig. 7: Model for Server Based Internet Applications with ISSCs 



Client Computer with 
Browser Program 



Server Computer with Web Server 
and ISSC Processor Program 



User Interaction 
with browser (31) 



Web Server Software 



ISSC Processor 
Software (Invention) 



Send Request (32) 



^ Receives Request (33) 



Calls ISSC Processor (34) 



Read and Parse Requested 
Component Page and associated 
Component Classes (35) 



i. 



Component Processing (37) 



ilnitialize Component Editor (36) , 

T 



Page Generation (38) 







Pass generated page to web server, 
cleanup (39) 



Take generated page 
and send it to client 
browser (40) 



Analyze a 
page (42) 


nd display 




r 


Wait for user 
interaction (43) 



Fig. 8 



Receive Page (41) 






< 



Generation Algorithm 

Parameter 1 is a cb-list 



Repeat for all nodes of 1 (51) 










Test if Hj is browser text or a 
component (52) 



Text ^^^y^ — ---.......^...^C^^ 

Evaluate the Components Attributes (54) 



Send the browser text 




Continue with next node of 1 (56) 



at end of list 
Fig. 9: Generation Algorithm 



Browser-Code (61) 
<Hl>Database Search & Edit 
Form<Hl> 

<P>This is the fill-in form used to 
create new entries, to search, modify, 
or delete record 



Browser-Code (63) 
<table bgcolor="#90bb90" 
cellspacing=0 cellpadding=5 
border=0 > 

<tr><td> Name</td> 
<td> 



Component dbfield (64) 

name="Guest_Name" size=50 
mandatory=false trim=true 
V 



tTomponent dbform (62) 

id=se.dbform 1 relation="guestbook" 
key="Guest_Name" method="post" 



Browser-Code (65) 
</td></tr> 

<tr> <td> E-Mail</td> 
<td> 



Component dbfield (66) 
name="Email" size=50 
mandatory=false trim=true 



Component dbformbutton (67) 
name="clear" type="clear" 



Fig. 10: Example Abstract 



Syntax Tree (AST) 



Parameters: 

AST Node: n 



Display Method of a Component Class 



Parameter Values given in the Tag marking the Component 



Create component instance object (71) 



iCall the Component-Information procedure, pass the j 
{component instance object and the AST node n (72) | 







Call registration procedure of ISSC Processor and 
store resulting bid in the component object (73) 




> 





Generate component specific browser code (74) 



r . 

iCall Show Handle Procedure of the ISSC Processor (75) 
[Pass the component instance object, the image to display, 
■and Handle-Kind 'Begin-Handle' 



I 



Generate component specific browser code (76) 



iCall Show Handle Procedure of the ISSC Processor (77) 
|Pass the component instance object, the image to display, 
land Handle-Kind ^End-Handle' 




This sometimes is done 
implicitaly by the programming 
language since display is a 
constuctor 



These calls can 
usually be 
inherited using 
an object 
oriented 
programming 
language. 



Boxes with round comers 
define source code parts to 
be programmed per 
component 



Boxes with broken lines call 
the component editor. These 
procedures work only if 
pages are displayed in edit- 
mode. To understand the 
component algorithm they 



Fig. 1 1 : Display Method Algorithm Structure 



Sample Component Class: Counter 



Inherit from Class 'Component' 



Display Method, expects Counter Name as parameter cname 



Inherit steps (71) and (72) of 'component' class (81) 

I 

Call Show-Handle for Begin-Handle (83) 



Read the Value of Coimter named cname from Database (84) 



Generate browser code to display the Coxmter Value (85) 



Increment Counter named cname in Database (86) 



Call Show Handle for End Handle (88) 



Steps (82) and (87) are not present because 
Drawing 9 shows an extended counter that has 
the same step numbers and uses (2) and (7) 



Fig. 12: Example Counter Component Class 



Registration Procedure 



Parameter: 

Component Instance 



Create bid as the kind of the component instance as string followed 
by the value of the global bid-counter and assign the bid to the bid 
field of the component instance. (91) 



Increment the global bid-counter (92) 



Insert the component instance into the list of 
listening components. (93) 



Fig. 13: Registration Procedure 



Component Processing Algorithm 



Sort name-value pairs of the form data set on the name and 
group all name- value pairs with the same bid (100) 



state := OK 

Repeat for all groups of name-value pairs (101) 



at end 




ext group 



Consult the list of listening components to find the 
component with the bid of the current group of name-value 
pairs (102) 



not found) 



found ,r 



call the check method of this 
component, pass group (103) 



on OK 



on error 



state := error (104) 



If state =OK(105) 



yes 




no 



Repeat for all groups of name- value pairs (106) ^ 



at end 



\^ie)rt group 



Consult the list of listening components to find the 
component with the bid of the current group(107) 



not foi 



call the process method of this 
component, pass group (108) 



Clear set of listening components (109) 




found 



Fig. 14: Component Processing Algorithm 



Sample Component Class: Counter with Reset 

Inherit from Class 'Component' 



Display Method, expects Counter Name as parameter cname 

Inherit steps (71) and (72) of 'component' class (111) 

t 

Call Registration Procedure (1 12) 

ICall Show-Handle for Begin-Handle (113) 



Read the Value of Counter named cname from Database (114) 



Generate browser code to display the Counter Value (1 15) 



Increment Covmter named cname in Database (116) 



i 

Create a link to the URL 

thispagelbidsQS^X^mQ 
where thispage is the url of the current page (provided by the 
ISSC processor) and bid is the bid of the counter component 
instance. (117) 



t 

Call Show Handle for End Handle (1 1 8) 



Save counter name for processing: let this.cname=cname (119) 



Check Method 






Return 'OK' (120) 





, — — 

jProcess Method 

I 

t 



j Set Counter named this, cname in the Database to 0 ( 1 2 1 ) 

i 

L 

Fig. 15: Example Component Class for Counter with Reset 



Sample Component Class: dbinsertpanel 



Inherit from Class 'Component' 



Display Method, expects dbrelation as parameter 



Inherit steps (71) and (72) of 'component' class (131) 



Call Registration Procedure (132) 



1 



Call Show-Handle for Begin-Handle (133) 



I 



Set global variable curpanel to this, save the old value of curpanel 
let this.fieldlist = empty list 

let this.dbrelation = dbrelation (134) 



Call Generate recursively for the content of dbinsertpanel (135) 
restore old value of curpanel 



Call Show Handle for End Handle (136) 



Check Method receives form data set group as parameter 



Retum 'OK' (140) 



Process Method receives form data set group as parameter 



Execute an SQL Insert Statement into the database relation this.relname. The field names are 
found in this.fieldlist and the field values in form data set group 



Fig. 16: Example Component Class for dbinsertpanel 



Example Component Class: dbinsertfield 

Inherit from Class 'Component' 



Display Method, expects fieldname and fieldsize as parameter 



Inherit steps (71) and (72) of component' class (151) 



Call Show-Handle for Begin-Handle (152) 



The global variable empanel is the component object of the enclosing panel (153) 
Insert the fieldname into curpanel.fieldlist 



Generate code for an HTML text input field. Field name is 

curpanelbid" . "fieldname 
and the fieldsize is given as parameter. (154) 



I 



Call Show Handle for End Handle (155) 



Fig. 17: Example Component Class for dninsertfield 



Editor Structure 



Page (161) 




Edit-Processor, (162) 

adds user interface elements and 

scripts for editing 



Edit-Page (163) 



reads writes 

id 
moaitii 



Component Editor Server Part 

modifies pages based on commands 
from the client part (1 66) 



mteract 



Browser 







Component Editor 
Client Part (165) 






loaded into the 
browser as a script 


Edit Page with 
Edit Scripts (164) 




Loaded into the 
Browser 


^ interact^ 











Fig. 18: Editor Structure 



Component Editor Initialization Procedure 



Get the Cookie named 'complever and test 
ifthevalue= 1 (171) 




Get the IP number of the client and check if it 
is in the set of allowed IP addresses. (172) 




End 



Fig. 19: Component Editor Initialization Procedure 



Component Information Procedure 

Parameters 

Component node n of AST, 
Current component Instance 

Test if complevel=l (181) 




If this is the first call of Component- 
Information for a component page (1 82) 




Generate Page Initialization Code (183) 
Global-Component-Number = 1 : 




Assign Global Component Number to the CINR of current instance and 
increment the Global Component Number (184) 



Generate Script Code to build up component description (185) 
More precisely generate the code 

<script language="Javascript"> 

c=newcomp(); 

cMnd=componentkind; 

c.pos=Position; 
where componentkind is the kind of the component of n and 
Position is the encoded position of the component found in the AST node n 



Generate Code to store the attributes of the component instance (1 86) 

c.p=newattrib(); 
For each attribute of n 

c.p.attributname = "Attributevalue " 

where Attributvalue is the escaped value of the current attribute 



Generate Code to store the component description into the comps Array (187) 
comps[C/A^i?] = c; 
</script> 

where CINR is the component instance number of the current component instance 




End 



Fig.20: Component Information 
Procedure 



Show-Handle Procedure 

Parameters 

Current Component Instance 

Handle Kind: Begin-Handle or End-Handle 

Handle Image: im 



Test if complevel=l and component 
instance stems from component page (191) 



no 



yes 



Generate a link 

'<a href="javascript:yh.cedit(cmr, Handle'Kind)">' 
where cinr is the component instance number (cinr) of the 
current component instance (192) 



I . 4^ 

Generate the handle image 

'<img src="im">' 

where im is the handle image name (193) 




Fig.21 : Component Editor Show Handle Procedure 



Generate-Page-Initialization-Code 



Generate code to set the variable yh to point to the component 
editor control window. For example in javascript this is 
achieved by using the open function with the window name of 
the component editor control window. 
Generate code to store the own window handle in 
yh.appwindow so that the control window can access the 
Application- window. (201) 



± 

Generate definitions of helper functions necessary to create 

component descriptions. These are basically empty constructors 

to create the component description and attribute description 

objects. (202) 



Fig.22: Generate Page Initialization Code 



Structure Component Editor Client Part 



Application-Page 



ii 



Component 

with 

Handles 



Component 

with 

Handles 



f\\ Application- Window (211) 



Menu-Page 



Component Editor Menu-Frame (213) 



Component-Edit-Page for specific component kind 



Component Editor Work-Frame (214) 



Component Editor Control- Window (212) 



Fig,23: Structure Component Editor Client Part 



Component Editor Client Part Pages 



Start Page 
Initialize Editor 
(221) 



Creates Control 
Window and loads 
Control Page 



Creates Menu Frame and 
loads Page 



Menu Page 
(223) 

goes into 
Menu Frame 



Control Page 
(222) 

goes into 
Component Editor 
Window 



Creates Working Frame 
and loads Help Page 




Help Pages 
(224) 

Help Text 



J 



Component Edit 
Pages 
(225) 

one page for 
each component 
kind 



It 



It 



J 



Component 
Catalog Pages 
(226) 

listing available 

Components, 
several pages for 
many components 



3r 
It 



Fig.24: Component Editor Client Part Page Structure 



Component Editor Start Page 



Call javascript open function to 

■ open up the component editor control window 

■ to load the component editor control page into it 
(231) 



Message 'Component Editor Coming Up Please Wait' (232) 
Links to Application Pages (233) 



Fig. 25: Component Editor Start Page 



Component Editor Control Page 



Insert Procedure Definition (241) 



Cedit Procedure Definition (241) 



Load Procedure (242) 
Set Complevel Cookie to 1 



Unload Procedure (243) 
Set Complevel Cookie to 0 



Frame set for Component Editor Window (244) 

• Menu Frame with Menu Page 

• Working Frame with initial Help Page 



Fig. 26: Component Editor Control Page 



Insert Procedure 

Parameter: Component Kind 





Create an empty component 
description in editcomp (251) 










Set editcomp.kind to the kind 
parameter given (252) 






r 




Let editcomp.text become the empty 
string (253) 






r 




Let Insert-Mode = true (254) 






r 


Load Component Edit Page for Kind editcomp.kind 
into the Working Frame (255) 



Fig. 27: Insert Procedure 



cedit Procedure 

Parameters 

Window: w 

Component Instance Number: cn 
Handle Kind (Begin or End Handle): hk 



curcomp = w.comps[cn], appwindow=w (261) 



if Insertmode=true (262) 




Let pos be the position of curcomp 



Check Handle Kind hk (263) 



egiiSHandle 



End-Handle 



Leitargetpos contain 
pol.page-name and 
py.beginright (264) 



Let targetpos contain 
pos.page-name and 
pos.endleft if present. 
Otherwise take pos. 
Beginright (265) 



no 



Let editcomp = curcomp (269) 



Load Component Edit Page for Kind editcomp.kind 
into the Working Frame (270) 



Assign targetpos to the targetpos field of 
the component form displayed in the 
working frame. (266) 



InsertMode := false (267) 



Submit the component form displayed in 
the working fi^ame (268) 



End 



Fig.28: cedit Procedure 



Component Edit Page 



HTML Form called Component Edit Form (281) 



Form Fields one for each possible component attribute 
initially empty (282) 



Hidden Component-Kind Field containing Component Kind (283) 



Hidden Component Position Field initially empty (284) 



Hidden Target Position Field initially empty (285) 



Textarea for Component Content (286) 



Submit Button(287) 



Content Button(288) 



Delete Button (289) 



Onload Procedure 



Copy attribute values from top.editcomp.p 

into attribute form fields (290) 

Copy position of editcomp.p into position field 



Fig.29: Component Edit Page 



Component Editor Server Part 



Analyze and decode Form Data Set and store Information in global 
variables. Decode the pos form field into its parts and make them 
accessible by pos.page-name, pos.beginleft .... (301) 



Call the Component Editor Initialization and Check if 
complevel=l (302) 



... a 



Send Error Message (304) 




Check whether Content button was clicked 
by inspecting the form data set (303) 



Yes, Conjrat clicked 




no 



Process-Content (305) 



Process Update (306) 



End 



Fig.30: Component Editor Server Part 



Process-Content Procedure 



Read the content of the page given in the pos.page- 
name form field from character position beginright 
until endleft excluding the and characters. Store 
the result, the content of the component, into a string 
variable t. (311) 



Generate a script that assigns the value of t to 
editcomp.text. Note that special characters like new 
line need to be escaped. (312) 



Generate a script to 

Load the Component Edit Page for Kind editcomp.kind 
into the Working Frame (313) 



Fig.31: Process Content Procedure 



Process Update 

Parameter: 

Decoded Form Data Set of component form 
Decoded position pos 



yes 



TargetPos given in the form data set ? (321) 



no 



t = Generate-Component- 
Text (323) 




i 



Check if Delete Button was pressed 
by investigating Form Data Set (322) 



Decode targetpos and Insert 
the-string t into the file 
speigfied by targetpos.page- 
nairS at the line and column 
givep in targetpos. charpos 
(32f| 





t = Generate-Component-Text 
(328) 



Is endright in pos (325) 



yes 



Delete all characters of 
the page specified by 
pos.page-name that are 
between pos.beginleft 
and pos.endright (326) 



Is there a fie 



d named Text 



in the form data set (329) 



no 



yes 



Delete all characters of 
the page specified by 
pos.page-name between 
pos.beginleft and 
pos.endrightline (327) 




Replace all characters of 
the page specified by 
pos.page-name between 
pos.beginleft and 
pos.endright by t (330) 




Replace all characters of 
the page specified by 
pos.page-name that are 
between pos.beginleft 
and pos.beginright by t 
(331) 



Generate 'Update performed' message into the output 
page (332) 




Issue reload in application window accessible as 
top.appwindow (333) 



Fig. 32: 

Process Update 
Procedure 



Generate-Component-Text Procedure 

Parameters: 

Decoded Form Data Set of Component Form 



Let string t become followed by the component 
kind and a space character. (341) 



Repeat for all form fields whose name starts with 'p.' 
(i.e. the name has the form p,name) (342) 



End of loop 



More fields 



Append name followed by an and a double- 
quote the form field content, a closing double- 
quote and a final space to the string t. (343) 



Append '>' to t (344) 



Is there a field named 'text' in 
the form data set (345) 



No 



Yes 



Append the value of the 'text' form field 
to t. (346) 



Append '<' followed by the component 
kind and a to t (347) 



End 



Fig.33: Generate Component Text Procedure 



Multi-Window Applications 



To make the generation algorithm work for muhiple windows replace step (93) of 
the registration subprocedure of the generation algorithm by 



Insert the component instance into that list of listening 
components that belongs to the destination window. (351) 



Insert Step (352) before step (101) of Fig. 14 



Step (100) of Fig. 14 



Let the list of listening components become the concatenation of 
all the lists of listening components of all windows. (352) 



Step (101) of Fig. 14 



Replace Step (109) of Fig. 14 by (step 353) 



Clear the list of listening components that belongs to 
the destination window (353) 



Fig.34: Mutli- Window Applications 



* 



Persistent Components 

(71) of Fig. 1 1 can be replaced by 



Check if the component has a name 
given and if there is already a 
component of that name in session 
memory (361) 



Use the existing Object 

as component instance object (362) 



Create new component instance object (363) 



Continue with 
Step 72 of Fig. 11 



Step 91 of Fig. 13 



Delete component instance from the list of listening 
components (or in the multi-windows case from all lists of 
listening components), provided it is already contained in 
it. (364) 



± 

Step 92 of Fig. 13 



Fig.35: Persistent Components 



Session Less ISSC 



Session variables like bid counter, and list of listening components 
become global server variables shared for all users. 



Step 109 of page 1 14 becomes: 



Remove all component objects from the list of listening 
components that were added longer than a fixed time-out 
value ago. (371) 



Fig, 36: Session Less ISSC 



